<template>
    <div class="center">
        <div class="item" v-for="item in data" :key="item.index" @click="item.clickEvent">
            <img class="item-img" :src="item.img" />
            <div>
                <div class="item-label">{{ item.label }}</div>
                <div class="item-value">
                    <CountTo :value="item.value" :duration="2000" />
                </div>
            </div>
        </div>

        <!-- 对话框 -->
        <mydialog v-if="dialogVisible" @close="handleClose">
            <template #default>
                <dialog-item v-for="item in sj" :key="item.index" :title="item.title" :tags="item.tags"
                    :address="item.address" :imgurls="item.imgurls" />
            </template>
            <template #bottom>
                <el-pagination size="small" background layout="prev, pager, next" :total="50" /></template>
        </mydialog>

    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

import { getMiddleData } from "@/api/homeData";
import CountTo from '@/components/CountTo/index.vue';

import mydialog from "@/components/mydialog/index.vue";
import dialogItem from "@/components/dialogItem/index.vue";
import dialogitemTest from "@/assets/dialogitemTest.jpg";

import totalSum from "@/assets/home/center/totalSum.png";
import monitoring from "@/assets/home/center/monitoring.png";
import bycicle from "@/assets/home/center/bycicle.png";
import labelimg from "@/assets/home/center/label.png";
import book from "@/assets/home/center/book.png";
import table from "@/assets/home/center/table.png";
import protect from "@/assets/home/center/protect.png";
import building from "@/assets/home/center/building.png";

const router = useRouter();
const dialogVisible = ref(false);

//总项目
const data = ref([
    {
        img: totalSum,
        label: '主体总数',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: monitoring,
        label: '阳光厨房',
        value: 0,
        clickEvent: () => {
            handleToSunshineCollege();
        }
    },
    {
        img: bycicle,
        label: '网络订餐',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: labelimg,
        label: '封签商家',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: book,
        label: '放心消费',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: table,
        label: '文明餐桌',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: protect,
        label: '食责险',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    },
    {
        img: building,
        label: '限塑单位',
        value: 0,
        clickEvent: () => {
            dialogVisible.value = true;
        }
    }
]);
//dialog内的数据
const sj = ref([
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
    {
        title: "南京领御餐饮管理有限公司泰州万象城店",
        tags: ["阳光厨房", "awdawd"],
        address:
            "江苏省泰州市高新区凤凰街道永定东路399号泰州万象城4层B317-318号商铺",
        imgurls: [
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            dialogitemTest,
        ],
    },
]);

onMounted(async () => {
  const result = await getMiddleData();
  const newData = result.data;
  
  // 更新数值
  data.value[0].value = newData.storeCount;
  data.value[1].value = newData.sunshineKitchenCount;
  data.value[2].value = newData.onlineOrderingCount;
  data.value[3].value = newData.sealCount;
  data.value[4].value = newData.safeConsumptionCount;
  data.value[5].value = newData.civilizedDiningCount;
  data.value[6].value = newData.foodSafetyInsuranceCount;
  data.value[7].value = newData.plasticLimitUnitCount;
})

function handleClose() {
  dialogVisible.value = false;
}
function handleToSunshineCollege() {
    router.push({ name: "sunshineCollegePage" });
}
</script>
<style scoped>
:deep(.main-body) {
    display: flex;
    flex-wrap: wrap;
}

:deep(.dialog-item) {
    width: calc(50% - 0.3vw);
    height: calc(50% - 0.3vw);
}

.center {
    width: 100%;
    height: 15vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.item {
    flex: 1 1 23%;
    max-width: 23%;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    height: 2.3vw;
    cursor: pointer;
}

.item .item-img {
    width: 3vw;
    height: 2.5vw;
}

.item .item-label {
    text-align: left;
    font-size: 0.8vw;
}

.item .item-value {
    text-align: left;
    margin-left: 0;
    font-size: 1.6vw;
    letter-spacing: 0.1vw;
    font-family: homeTime;
}
</style>